import {useRef, useState} from 'react';
import {useFrame} from '@react-three/fiber';
import {BaseBlock} from './BaseBlock.jsx';
import {RigidBody} from '@react-three/rapier';

const BlockLimbo = ({geometry, material, position = [0, 0, 0]}) => {

  const obstacleRef = useRef();

  const [timeOffset] = useState(() => {
    return Math.random() * Math.PI * 2;
  });

  useFrame((state) => {
    const time = state.clock.getElapsedTime();
    const y = Math.sin(time * timeOffset) + 1.15;
    obstacleRef.current.setNextKinematicTranslation({x: position[0], y: position[1] + y, z: position[2]});
  });

  return (
    <group position={position}>
      <BaseBlock geometry={geometry} color={1} />
      <RigidBody ref={obstacleRef} type={'kinematicPosition'} position={[0, 0.3, 0]} restitution={0} friction={0}>
        <mesh
          geometry={geometry}
          material={material}
          scale={[3.5, 0.3, 0.3]}
          receiveShadow
          castShadow
        />
      </RigidBody>

    </group>
  );
};

export default BlockLimbo;
